import React from 'react';
import { connect } from 'dva';
import { createForm } from 'rc-form';
import { TextareaItem } from 'antd-mobile';
import styles from './workExperience.css';
import CustBtn from '../../../../../../../common/buttons/Btn';
import date from '../../../../../../../framework/utils/date';
import CustomsItemNoArrow from '../CustomsItemNoArrow/CustomsItemNoArrow';
import Line from '../../../../../../../common/borderLine/Line';

const addImg = require('../../../../../../../icons/add-6CA0F7.png');
const pointIcon = require('../../../../../../../icons/personal/myReume/point-icon.png');
const editIcon = require('../../../../../../../icons/personal/myReume/edit-icon.png');

const WorkExperience = ({
  resumeModel={},
  textName='',
  onOk=()=>{},
  onAdd=()=>{},
  onViewDetail=()=>{},
}) => {

  const CustomsItemNoIconProps = {
    label: textName,
    text: '添加',
    onOk,
  }

  const showWorkExperienceList =(resumeModel) =>{
    const list = resumeModel.workExperiences;
    if(list && list.length > 0){
      return list.map((item, index) => {
        return(
          <div key={index.toString()}
            className={styles.workExperienceItem}>
            <div className={styles.itemIcon}>
              <img src={pointIcon}/>
              <div className={styles.verticalLine}></div>
            </div>
            <div className={styles.itemContent}>
              <span className={styles.itemTitleName}>
                {convertDate(item.entryTime, item.dimissionTime)}
              </span>
              <span className={styles.companyName}>{item.workCompany}</span>
              <span className={styles.jobName}>{item.workPost}</span>
            </div>
            <div className={styles.editIcon}
              onClick={()=> onViewDetail(item)}>
              <img src={editIcon}/>
            </div>
          </div>
        )
      })
    }else{
      return (
        <div className={styles.addView} onClick={onAdd}>
          <img src={addImg} />
          <span>添加工作经历</span>
        </div>
      )
    }
  }

  //时间转换
  const convertDate = (firstTime, secondTime) => {
    const newFirstTime = date.yearAndMonthAndDay(firstTime);
    const newSecondTime = date.yearAndMonthAndDay(secondTime);
    return `${newFirstTime} ~ ${newSecondTime}`;
  }

  return (
    <div className={styles.container}>

      <CustomsItemNoArrow {...CustomsItemNoIconProps} />
      {/* <CustomsItemNoIcon {...CustomsItemNoIconProps} /> */}
      <Line/>
      <div className={styles.content}>
        <div className={styles.stepsContent}>
          {showWorkExperienceList(resumeModel)}
        </div>
      </div>
    </div>
  )
}


WorkExperience.propTypes = {
};

export default createForm()(WorkExperience);
